<template>
    <a-modal
        :keyboard="false"
        :maskClosable="false"
        title="手动计算应收款"
        :open="visible"
        :width="800"
        :confirmLoading="loading"
        okText="确认计算"
        centered
        @ok="handleSubmit"
        @cancel="handleCancel"
    >
        <a-form layout="vertical" ref="formRef" :model="modelRef">
            <a-row :gutter="16" type="flex" justify="start">
                <a-col :xs="12" :sm="12" :md="12">
                    <a-form-item label="计费科目" name="chargeItemType">
                        <a-radio-group v-model:value="modelRef.chargeItemType">
                            <a-radio :value="1">指定科目</a-radio>
                            <a-radio :value="2">房屋收费全量设置</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24">
                    <a-form-item
                        label="备注"
                        name="remark"
                        :rules="[
                            {
                                required: false,
                                message: '请输入备注',
                            },
                        ]"
                    >
                        <a-input v-model:value="modelRef.remark" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
</template>

<script lang="ts" setup>
    import type { PropType } from 'vue';
    import { reactive, ref, watchEffect, watch } from 'vue';
    import { message } from 'ant-design-vue';
    import { cloneDeep, isUndefined } from 'lodash-es';

    import { findTree } from 'xe-utils';

    const visible = ref<boolean>(false);

    const emit = defineEmits(['cancel', 'success']);

    const loading = ref(false);
    const formRef = ref<any>(null);
    const chargeItemTypeTree = ref<any[]>([]);
    const chargeStandardList = ref<any[]>([]);
    const defaultForm = {
        billingPeriodType: 2,
        repeat: 0,
        chargeItemType: 1,
        billingPeriod: [],
    };
    const modelRef = reactive<any>(cloneDeep(defaultForm));

    const handleCancel = () => {
        formRef.value.resetFields();
        emit('cancel');
        visible.value = false;
        Object.keys(modelRef).forEach(key => {
            delete modelRef[key];
        });
        Object.assign(modelRef, cloneDeep(defaultForm));
    };

    const handleSubmit = async () => {
        formRef.value.validate().then(res => {
            loading.value = true;
            const { projectCode, ...params } = modelRef;

            // params.typeName = meterTypeList.value.find(item => item.value === params.typeCode)?.label;

            // (!isUndefined(params.id) ? updateFinancialMeterDevice : createFinancialMeterDevice)(params)
            //     .then(res => {
            //         if (res.code == 200) {
            //             message.success('操作成功');
            //             emit('success');
            //             handleCancel();
            //         }
            //     })
            //     .finally(() => {
            //         loading.value = false;
            //     });
        });
    };
    const init = async data => {
        console.log(data);
        Object.assign(modelRef, data);

        visible.value = true;
    };

    defineExpose({
        init,
    });
</script>
